Foundations of Computer Graphics - Lecture 1 [Part 4]

مقدمة
  • هنكمل الشابتر الاول, في الجزء ده هنتكلم عن الألوان في الـ Computer Graphics، وإزاي الكمبيوتر بيخزن ويعرض الألوان باستخدام أنظمة مختلفة زي RGB وCMYK.
  • كمان هنتعرف على مفاهيم مهمة زي Color Depth وAlpha Channel وتأثيرهم على جودة الصور والشفافية وحجم البيانات.

1) Color Model

definition

Color Model is a mathematical framework used to represent colors as numerical values.

  • الـ color models بتتقسم لنوعين أساسيين:
    • Additive Color Models
    • Subtractive Color Models
  • التصنيف ده بيعتمد على هل اللون بيتكون بإضافة الضوء ولا بامتصاص الضوء.

2) Additive Color Models

  • الـ Additive Color Models بتكون الألوان عن طريق دمج مصادر ضوء, كل ما تزود الاضاءه، اللون الناتج يبقى أفتح, ولما الاضاءه تزيد للاخر، الناتج يبقى white, لما مفيش ضوء، الناتج يبقى black.
  • بتستخدم في الأجهزة الالكترونية اللي بتطلع ضوء زي:
    • Computer monitors
    • Televisions
    • Mobile screens
    • Projectors

Common Additive Color Models

ا Model الفكرة
RGB بيعتمد على Red, Green, Blue، وده الأساسي في الشاشات والكاميرات والـ scanners
HSV / HSB مشتق من RGB وبيمثل اللون بـ Hue, Saturation, Value/Brightness، وأسهل في اختيار وتعديل الألوان, اقرب حاجة لتصورنا ك بشر عن الالوان
HSL مشتق من RGB برضه، بس بيستخدم Lightness بدل brightness ويدي تحكم أحسن في shading و color variations
CIE XYZ ا device-independent model مبني على منظورنا في الضوء، وبيستخدم كـ reference color space للتحويل بين الأجهزة

RGB

  • الـ RGB هو أهم additive color model في computer displays.
  • اللون بيتكون من intensities مختلفة من الـ : Red والـ Green والـ Blue
  • لما التلاتة يبقوا maximum، اللون يبقى white.

3) Subtractive Color Models

  • الـ Subtractive Color Models بتستخدم في الطباعة.
  • بتدمج pigments أو inks عشان تمتص اطوال موجية معينة من الضوء.
  • ,ئأشهر model هنا هو CMYK:
    • Cyan
    • Magenta
    • Yellow
    • Black / Key
Why Does CMYK Use K?
  • الـ K معناها Key , المشكله اننا لو ضفنا الـ Cyan , Magenta , Yellow هيديلنا بني غامق فـ بنستخدم الـ key عشان نعرف ننتج اللون الاسود

4) Color Depth

definition

Color Depth is the number of bits used to represent the color of a single pixel.

  • كل بيكسل على الشاشة محتاج مساحة في الميموري (بالـ Bit) عشان يخزن بيانات لونه. كل ما تزود مساحة الـ Bits للبيكسل الواحد، كل ما تقدر تطلع تدرجات ألوان أكتر بكتير.
  • يعني 24-bit color بيمثل تقريبا:
2^24 = 16,777,216 colors         // More bits per pixel = more possible colors

Color depth is also referred to as:

  • Bit Depth
  • Bits Per Pixel (bpp)
  • Bits Per Channel (bpc)

5) Color Palette and Indexed Color

Color Palette

definition

Color Palette is a predefined table containing a limited set of colors available for an image or display.

  • بدل ما نخزن اللون كامل لكل pixel، ممكن نخزن index بس.
  • الـ index ده بيشاور على لون موجود في palette.
  • الطريقة دي بتقلل memory usage و file size.
  • كانت مهمة جدا في أنظمة الكمبيوتر القديمة, بس لسه بتستخدم ساعات لما memory efficiency تبقى مهمة.

Indexed Color

definition

Indexed Color is a color representation method that uses a color palette.

  • في Indexed Color:
    • كل pixel بيخزن index value.
    • الـ index بيشاور على لون داخل الـ palette.
    • قيم الألوان الحقيقية بتتخزن مرة واحدة في الـ palette.
  • بيستخدم غالبا مع color depth محدود زي:
    • 1-bit
    • 4-bit
    • 8-bit

6) Common Color Depths

Color Depth No. of Colors Palette Color Mode
1-bit color 2 Yes Indexed Color
4-bit color 16 Yes Indexed Color
8-bit color 256 Yes Indexed Color
24-bit color 16,777,216 No True Color

7) Difference Between 16-bit, 24-bit, and 32-bit Color

  • التلاتة بيستخدموا RGB Color Model، بس بيختلفوا في عدد color combinations ووجود alpha channel.
Type الفكرة
16-bit color / High Color بيدعم 65,536 colors، ومناسب لمعظم الاستخدامات العامة
24-bit color / True Color بيدعم 16,777,216 colors، وبيطلع gradients ناعمة وجودة عالية
32-bit color زي 24-bit بس بيضيف Alpha Channel للشفافية والتأثيرات المتقدمة، ونظريا بيدعم 4,294,967,296 combinations
  • ا Higher color depth محتاج memory أكتر و processing power أكتر.
  • بس أغلب modern graphics hardware بتدعمه.

8) Alpha Channel

definition

Alpha Channel is an additional component added to RGB to represent transparency.

  • الـ Alpha Channel بيتحكم في درجة شفافية أو عتامة كل pixel.
  • القيم الأقل معناها transparency (شفافيه) أعلى.
  • القيم الأعلى معناها opacity (وضوح) أعلى.
  • الـ 32-bit color بيستخدم alpha channel مع RGB عشان يدعم:
    • ا Transparency
    • ا Shadows
    • ا Smooth blending
    • ا Advanced effects

9) Advantages and Disadvantages of Higher Color Depth

Advantages

  • ألوان واقعية أكتر.
  • الـ gradients أنعم.
  • دعم أحسن للـ shadows والـ transparency والـ complex visual effects.
  • ممكن يقلل eye strain أثناء مشاهدة الصور والفيديوهات.

Disadvantages

  • استهلاك أكبر للـ memory.
  • محتاج processing power أكتر.
  • ممكن يقلل FPS في الألعاب حسب graphics card ومتطلبات اللعبة.

10) True Color

definition

True Color is any color setting using at least 24 bits per pixel, capable of representing about 16.7 million colors.

  • الـ True Color بيقدر يمثل الصور والـ complex graphics بدقة عالية في RGB Color Space.
  • غالبا بيتقسم لـ 256 shade لكل channel:
    • Red
    • Green
    • Blue
  • بيدي display ناعم ودقيق للألوان.
  • عدد الألوان فيه أكبر من اللي العين البشرية تقدر تميزه بدقة في حالات كتير.

11) ملخص المحاضرة

كده خلصنا الجزء الرابع

اتكلمنا في المحاضره دي عن Color Models وعرفنا إن فيه نوعين: Additive (زي RGB و HSV و HSL - بيستخدم في الشاشات بإضافة الضوء) و Subtractive (زي CMYK - بيستخدم في الطباعة بامتصاص الضوء).

وعرفنا الـ Color Depth - عدد البتات المستخدمة لكل Pixel، وكل ما زادت كل ما الألوان كانت أكتر ودقة أعلى (زي 24-bit True Color بـ 16.7 مليون لون).

واتكلمنا عن Indexed Color و Color Palette - إن كل Pixel بيخزن Index بدل اللون الكامل عشان توفير memory، وده كان مهم في الأنظمة القديمة.

وفي الآخر عرفنا الـ Alpha Channel - القناة الإضافية للشفافية في 32-bit color، و True Color (24-bit) وقارنا بين 16-bit و 24-bit و 32-bit.